.mpPay {
  height: 100%;
  font-family: PingFangSC, PingFangSC-Regular;
  background-color: #fff;
  user-select: none;

  .header {
    display: flex;
    justify-content: space-between;
    margin: 30px;
    margin-bottom: 60px;
    padding: 33px 30px;
    background-color: #f7f7f7;
    border-radius: 16px;

    .shopName {
      display: flex;
      align-items: center;
      max-width: 570px;
      color: #222;
      font-weight: 600;
      font-size: 34px;
      line-height: 42px;
      img {
        height: 42px;
        margin-right: 15px;
      }
    }
    .remarkBtn {
      display: flex;
      align-items: center;
      color: #ed7f39;
      font-size: 32px;
    }
  }

  .content {
    padding: 0 60px;
    .contentTitle {
      margin-bottom: 14px;
      color: #666;
      font-size: 28px;
    }
  }

  .input {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 630px;
    margin: auto;
    padding-bottom: 14px;
    color: #222;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;

    .inputIcon {
      font-size: 72px;
    }

    .inputNumber {
      position: relative;
      max-width: 500px;
      height: 112px;
      font-size: 60px;
      line-height: 116px;

      &::after {
        position: absolute;
        top: 26px;
        right: -8px;
        display: block;
        width: 2px;
        height: 62px;
        background-color: #000;
        animation: keyboard-cursor infinite 1s step-start;
        content: '';
      }
    }

    .inputPlaceholder {
      display: none;
      height: 112px;
      padding-left: 10px;
      color: #d7d7d7;
      font-size: 48px;
      line-height: 112px;
      &.show {
        display: block;
      }
    }

    :global(.am-list-line) {
      padding-right: 40px;
      :global(.am-input-label) {
        width: 44px;
        color: #333;
        font-size: 50px;
      }
      :global(.am-input-control) {
        color: #b2b2b2;
        font-size: 50px;
        :global(.fake-input) {
          color: #333;
          font-size: 80px;
        }
      }
    }
  }

  .input2 {
    margin: 0 24px 20px;
    padding: 40px 40px;
    background-color: #fff;
    border-radius: 20px;

    .productName {
      margin-bottom: 88px;
      color: #333;
      font-weight: 500;
      font-size: 34px;
    }

    .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .price {
        display: flex;
        align-items: center;
        color: #333;
        font-weight: 600;
        font-size: 32px;
        :global(span) {
          margin-right: 24px;
          font-size: 50px;
        }
      }

      .operate {
        display: flex;
        align-items: center;
        // font-size: 50px;
        // width: 280px;
        height: 72px;
        border: 1px solid #e5e5e5;
        :global(.subtract),
        :global(.add) {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 72px;
          height: 72px;
        }

        :global(.subtract) {
          border-right: 1px solid #e5e5e5;
        }

        :global(.add) {
          border-left: 1px solid #e5e5e5;
        }

        :global(.inputNum) {
          width: 120px;
          height: 72px;
          color: #333;
          font-weight: 400;
          font-size: 30px;
          line-height: 72px;
          text-align: center;
          // border-top: 1px solid #e5e5e5;
          // border-bottom: 1px solid #e5e5e5;
        }
      }
    }
  }

  .instalmentAd {
    position: fixed;
    right: 0;
    bottom: calc(615px + constant(safe-area-inset-bottom));
    bottom: calc(615px + env(safe-area-inset-bottom));
    left: 0;
    width: 100%;
    :global(img) {
      display: block;
      width: 704px;
      margin: auto;
    }
  }

  .mpPayFooter {
    position: fixed;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    left: 0;
    display: flex;
    width: 100%;

    :global(.sum) {
      flex: 1;
      height: 128px;
      padding-left: 32px;
      font-weight: 800;
      font-size: 36px;
      line-height: 128px;
      text-align: left;
      background: #fff;
    }
    :global(.submit) {
      width: 330px;
      height: 128px;
      color: #fff;
      font-size: 40px;
      line-height: 128px;
      text-align: center;

      // &.ALIPAY {
      //   background: #3da1ec;
      // }

      // &.WECHAT {
      //   background: #46bb2c;
      // }

      // &.UNIONPAY {
      //   background: #db3a17;
      // }
    }

    :global(.numeric-keyboard-key) {
      transition: background 0.03s;
      &:global(.active) {
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }

  @keyframes keyboard-cursor {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  // .ALIPAY {
  //   :global(td[data-key='enter']) {
  //     background-color: #3da1ec;
  //   }
  //   &.disabled {
  //     :global(td[data-key='enter']) {
  //       background-color: #219fdb80 !important;
  //     }
  //   }
  // }

  // .WECHAT {
  //   :global(td[data-key='enter']) {
  //     background-color: #46bb2c;
  //   }
  //   &.disabled {
  //     :global(td[data-key='enter']) {
  //       background-color: #bee0c2 !important;
  //     }
  //   }
  // }

  // .UNIONPAY {
  //   :global(td[data-key='enter']) {
  //     background-color: #db3a17;
  //   }

  //   &.disabled {
  //     :global(td[data-key='enter']) {
  //       background-color: #f4d2d2 !important;
  //     }
  //   }
  // }

  .disabled {
    :global(.numeric-keyboard) {
      :global(td[data-key='enter']) {
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }

  :global(.numeric-keyboard) {
    position: fixed;
    bottom: 0;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    left: 0;
    width: 100%;
    height: 466px;
    font-size: 0;
    font-family: PingFangSC, PingFangSC-Regular;
    background-color: #f7f7f7;
    border-spacing: 0;
    :global(tbody) {
      :global(tr:first-child) {
        :global(td) {
          border-top-width: 16px;
        }
      }
      :global(tr:last-child) {
        :global(td) {
          border-bottom-width: 16px;
        }
      }
    }

    :global(td) {
      width: 167px;
      height: 98px;
      font-weight: 600;
      font-size: 48px;
      font-family: PingFangSC, PingFangSC-Regular;
      line-height: 98px;

      // border-right: 1px solid #e5e5e5;
      // border-bottom: 1px solid #e5e5e5;

      background: #fff;

      // padding: 16px;
      // border-spacing: 16px 16px;
      // border-color: #f7f7f7;

      border: 8px solid #f7f7f7;
      border-radius: 16px;
      transition: background 0.03s;
      &:first-child {
        border-left-width: 16px;
      }
      &:last-child {
        border-right-width: 16px;
      }
      &[data-key='enter'] {
        font-size: 36px;
        background: #ff9803;
        border-bottom-width: 16px;
      }
      // &:active {
      //   background: rgba(0, 0, 0, 0.1);
      // }
      &:global(.active) {
        background: rgba(0, 0, 0, 0.1);
      }
    }

    :global(td[data-icon='del']) {
      &::before {
        font-weight: 600;
        // display: block;
        // width: 100%;
        // height: 100%;
        // margin: 0 auto;
        // text-align: center;
        // background-image: url('/static/icon_backspace@2x.png');
        // background-repeat: no-repeat;
        // background-position: 54px;
        // background-size: 37%;
        // content: '';
      }
    }

    // :global(td[data-key='enter']) {
    //   font-size: 50px;
    //   &::before {
    //     display: flex;
    //     padding: 0 26px;
    //     line-height: 100px;
    //   }
    // }
  }

  .rights {
    position: fixed;
    bottom: calc(534px + constant(safe-area-inset-bottom));
    bottom: calc(534px + env(safe-area-inset-bottom));
    // bottom: 534px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #999;
    font-size: 28px;
    &.rightsLow {
      bottom: calc(160px + constant(safe-area-inset-bottom));
      bottom: calc(160px + env(safe-area-inset-bottom));
    }

    .rightsContent {
      display: flex;
      align-items: center;
    }

    :global(.divider) {
      width: 161px;
      height: 1px;
      background: #e5e5e5;
    }

    img {
      width: 204px;
      margin-right: 8px;
    }
  }
}

.remark {
  padding: 0;
  font-family: PingFangSC, PingFangSC-Regular;
  user-select: none;
  .remarkTitle {
    margin-bottom: 16px;
    color: #333;
    font-weight: 400;
    font-size: 36px;
    text-align: center;
  }

  :global(.am-textarea-item) {
    box-sizing: border-box;
    margin: 0 24px 32px;
    padding: 24px 32px;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    :global(.am-textarea-control) {
      padding: 0;
      :global(textarea) {
        color: #333;
        font-weight: 400;
        font-size: 34px;
      }
    }
  }
}

.instalment {
  font-family: PingFangSC, PingFangSC-Regular;
  user-select: none;
  .content {
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100px;
      padding: 0 24px;
      border-bottom: 1px solid #e5e5e5;
      .close {
        :global(.am-icon-cross) {
          width: 64px;
          height: 64px;
          color: #000;
        }
      }
      .title {
        color: #333;
        font-size: 32px;
      }
      :global(img) {
        height: 36px;
      }
    }
    .list {
      margin-bottom: 38px;
      padding: 0 24px;
      .item {
        display: flex;
        align-items: center;
        height: 100px;

        :global(.icon) {
          width: 86px;
        }
        :global(img) {
          width: 56px;
          margin-right: 30px;
        }

        :global(.radio),
        .radioGroupTitle {
          display: flex;
          flex-grow: 1;
          align-items: center;
          justify-content: space-between;
          height: 100px;
          color: #666;
          font-size: 32px;
          border-bottom: 1px solid #e5e5e5;

          :global(.text) {
            display: flex;
            align-items: center;
            :global(.principal) {
              margin-right: 8px;
              color: #666;
              font-size: 32px;
            }

            :global(.brief) {
              color: #999;
              font-size: 18px;
            }
          }

          :global(img) {
            width: 36px;
            margin-right: 0;
          }
        }

        .radioGroupTitle {
          :global(.badge_tj) {
            width: 48px;
            height: 26px;
            margin: 0 4px 0 8px;
          }
          :global(.badge_fqf) {
            width: 118px;
            height: 26px;
          }
        }
      }
    }
    :global(button) {
      display: block;
      width: 702px;
      height: 90px;
      margin: auto;
      margin-bottom: 30px;
      color: #fff;
      font-size: 32px;
      line-height: 90px;
      background: #219fdb;
      border: none;
      border-radius: 12px;
      outline: none;
    }
  }

  :global(.problem) {
    height: 656px;
    :global(.title) {
      width: 100%;
      height: 100px;
      color: #333;
      font-size: 32px;
      line-height: 100px;
      text-align: center;
      border-bottom: 1px solid #e5e5e5;

      :global(.left) {
        position: absolute;
        left: 24px;
      }
    }

    :global(.am-accordion) {
      height: 556px;
      padding: 0 24px;
      overflow: scroll;
      &::before {
        display: none;
      }

      :global(.am-accordion-item) {
        &:global(.am-accordion-item-active) {
          :global(i) {
            transform: rotate(90deg);
          }
        }
      }

      :global(.am-accordion-header) {
        height: 100px;
        padding: 0;
        color: #666;
        font-size: 32px;
        line-height: 100px;
        text-align: left;
        &::after {
          border-color: #e5e5e5;
        }

        :global(i) {
          right: 0;
          transform: rotate(0deg);
        }
      }

      :global(.am-accordion-content) {
        :global(.am-accordion-content-box) {
          &::after {
            display: none !important;
          }
        }
        :global(.panel) {
          padding-left: 40px;
          color: #666;
          font-size: 28px;
          line-height: 60px;
          text-align: left;

          :global(.text) {
            border-bottom: 1px solid #e5e5e5;
          }
        }
      }
    }
  }
}
